<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        *{
            list-style: none;
        }
        .imgList{
            height: 350px;
            border: 2px solid #ddd;
            margin-top: 15px;
            padding: 15px;
            overflow: auto;
        }
        .imgList ul{
            display: flex;
            flex-wrap: wrap;
        }
        .imgList li{
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            box-shadow: 2px 5px 8px #ccc;
        }
    </style>
</head>
<body>
    <div id="app">

        <h2>图片上传</h2>
        <hr/>
        <div>
            <p>ajax上传图片</p>
            <input type="file" name="file" id="fileId" />
            <button onclick="uploadFun()">上传</button>
        </div>

        <hr/>
        <div>
            <p>form表单上传</p>
            <form action="/upload" method="post" enctype="multipart/form-data">
                <input type="file" name="file" />
                <button type="submit">上传</button>
            </form>
        </div>

        <hr/>
        <div class="imgList">
            <ul>
                <li v-if="imgArr.length"
                    v-for="(item,index) in imgArr" :key="item.name+index">
                    <img id="showImg" :src="item.img" width="200" height="auto" />
                </li>
            </ul>
        </div>
    </div>

<script>

    var vm = new Vue({
        el: "#app",
        data:{
            imgArr: []
        },
        mounted(){
            this.getData()
        },
        methods:{
            getData(){
                $.ajax({
                    url: '/getData',
                    method: 'get',
                    success: (res)=>{
                        console.log(res)
                        if(Array.isArray(res)){
                            this.imgArr = res;
                        }

                    },
                    error: (err)=>{
                        console.log("err", err)
                    }
                })
            }
        }
    })



    function uploadFun(){
        // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
        var files = $('#fileId')[0].files;

        // 2. 判断是否选择了文件
        if (files.length <= 0) {
            return alert('请选择图片后再上传！');
        }
        // 原文链接：https://blog.csdn.net/weixin_52851967/article/details/128538988
        let formData = new FormData();
        formData.append('file', files[0]);
        $.ajax({
            url: '/upload',
            method: 'post',
            data: formData,
            // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
            contentType: false,
            // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
            processData: false,
            success: function(res) {
                console.log(res)
                if(Array.isArray(res)){
                    vm.$data.imgArr = res;
                }
                alert("上传成功！")
            },
            error: function (err){
                console.error("err:",err);
            }
        })
    }
</script>

</body>
</html>